<template>
  <Card :bordered="false">
    <!-- 订单操作 -->
    <template v-if="record.order_status != OrderStatusEnum['CANCELLED'].value">
      <div class="ant-descriptions-title">订单操作</div>
      <!-- 提示栏 -->
      <div
        class="alerts mt-10 mb-15"
        v-if="record.order_status == OrderStatusEnum['APPLY_CANCEL'].value"
      >
        <Alert
          message="当前买家已付款并申请取消订单，请审核是否同意，如同意则自动退回付款金额（微信支付原路退款）并关闭订单。"
          banner
        />
      </div>
      <!-- 操作栏 -->
      <div class="actions clearfix">
        <div class="action-item">
          <a-button
            v-if="record.pay_status == PayStatusEnum['PENDING'].value"
            @click="handle('handleUpdatePrice')"
            >订单改价</a-button
          >
        </div>
        <div class="action-item">
          <a-button
            v-if="
              record.pay_status == PayStatusEnum['SUCCESS'].value &&
              record.delivery_type == DeliveryTypeEnum['EXPRESS'].value &&
              record.delivery_status == DeliveryStatusEnum['NOT_DELIVERED'].value &&
              !inArray(record.order_status, [
                OrderStatusEnum['CANCELLED'].value,
                OrderStatusEnum['APPLY_CANCEL'].value,
              ])
            "
            type="primary"
            @click="handle('handleDelivery')"
            >发货</a-button
          >
        </div>
        <div class="action-item">
          <a-button
            v-if="record.order_status == OrderStatusEnum['APPLY_CANCEL'].value"
            type="primary"
            @click="handle('handleCancel')"
            >审核取消订单</a-button
          >
        </div>
      </div>
      <Divider class="o-divider" />
    </template>
    <!-- 订单信息 -->
    <Descriptions title="订单信息">
      <DescriptionsItem label="订单号">{{ record.order_no }}</DescriptionsItem>
      <DescriptionsItem label="实付款金额">￥{{ record.pay_price }}</DescriptionsItem>
      <DescriptionsItem label="支付方式">
        <Tag color="green">{{ record.pay_type && PayTypeEnum[record.pay_type].name }}</Tag>
      </DescriptionsItem>
      <DescriptionsItem label="配送方式">
        <Tag color="green">{{ record.delivery_text }}</Tag>
      </DescriptionsItem>
      <DescriptionsItem label="运费金额">￥{{ record.express_price }}</DescriptionsItem>
      <DescriptionsItem label="订单状态">
        <Tag @click="handle('info')" :color="renderOrderStatusColor(record.order_status)">
          {{ record.order_status && OrderStatusEnum[record.order_status].name }}
        </Tag>
      </DescriptionsItem>
      <DescriptionsItem label="配送状态">
        <Tag @click="handle('info')" :color="renderOrderStatusColor(record.order_status)">{{
          record.state_text
        }}</Tag>
      </DescriptionsItem>

      <DescriptionsItem label="买家信息">
        <Tooltip>
          <template #title>会员ID: {{ record.user?.user_id }}</template>
          <span class="c-p">{{ record.user?.nick_name }}</span>
        </Tooltip>
      </DescriptionsItem>

      <DescriptionsItem label="买家留言">
        <strong v-if="record.buyer_remark">{{ record.buyer_remark }}</strong>
        <span v-else>--</span>
      </DescriptionsItem>
      <DescriptionsItem label="预约时间">
        <strong>{{ record.delivery_time || '立即' }}</strong>
      </DescriptionsItem>
      <DescriptionsItem label="订单来源" v-if="record.order_source">
        <Tag color="green">{{ OrderSourceEnum[record.order_source].name }}</Tag>
      </DescriptionsItem>
      <DescriptionsItem label="活动名称" v-if="record.promotion_text">
        <strong>{{ record.promotion_text }}</strong>
      </DescriptionsItem>
      <DescriptionsItem label="活动优惠" v-if="record.promotion_money !== '0.00'">
        <strong>{{ record.promotion_money }}</strong>
      </DescriptionsItem>
    </Descriptions>
  </Card>
</template>

<script lang="ts" setup>
  import {
    DeliveryStatusEnum,
    DeliveryTypeEnum,
    OrderStatusEnum,
    PayStatusEnum,
    OrderSourceEnum,
    PayTypeEnum,
  } from '/@/common/enum/order';
  import {
    Card,
    Descriptions,
    Divider,
    Alert,
    Tag,
    Tooltip,
  } from 'ant-design-vue';
import { OrderRecordModel } from '/@/views/order/model';
   const DescriptionsItem = Descriptions.Item;

  defineProps({
    record: {
      type: Object as PropType<OrderRecordModel>,
      default: () => {},
    },
  });

  // 根据状态获取颜色
  const renderOrderStatusColor = (orderStatus) => {
    const ColorEnum = {
      [OrderStatusEnum['NORMAL'].value]: '',
      [OrderStatusEnum['CANCELLED'].value]: 'red',
      [OrderStatusEnum['APPLY_CANCEL'].value]: 'red',
      [OrderStatusEnum['COMPLETED'].value]: 'green',
    };
    return ColorEnum[orderStatus];
  };
  const handle = (action) => {
    console.log(action);
  };
  const inArray = (key, arr) => arr.includes(key);
</script>

<style lang="less" scoped>
  // 分割线
  .o-divider {
    margin-bottom: 32px;
  }

  // 操作栏
  .actions {
    .action-item {
      float: left;
      margin-right: 8px;
    }
  }
</style>
